<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css"
          href="../css/jqgrid/ui.jqgrid.css" media="screen"/>
    <link rel="stylesheet" type="text/css"
          href="../css/jquery/jquery-ui-1.8.23.custom.css" media="screen"/>
    <script type="text/javascript" src="../js/jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript"
            src="../js/jquery/jquery-ui-1.8.23.custom.min.js"></script>
    <script type="text/javascript" src="../js/jqgrid/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="../js/jqgrid/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="../js/base/constants.js"></script>

    <script type="text/javascript">
        jQuery(document)
                .ready(
                        function () {
                            jQuery("#list")
                                    .jqGrid(
                                            {
                                                //数据源  必须
                                                url: 'demo-show',
                                                //数据类型 必须
                                                datatype: "json",
                                                // 			colNames : [ '船名', "海关编号" ],
                                                //字段定义 必须
                                                colModel: [{
                                                    name: 'ship_id',
                                                    index: 'ship_id',
                                                    hidden: true,
                                                    align: "center"
                                                }, {
                                                    name: 'chn_name',
                                                    index: 'chn_name',
                                                    label: "船名",
                                                    width: 100,
                                                    align: "center"
                                                }, {
                                                    name: 'ciq_no',
                                                    index: 'ciq_no',
                                                    label: "海关编号",
                                                    width: 150,
                                                    align: "center",
                                                    // 				search : false
                                                }],
                                                //是否显示数据页数信息
                                                viewrecords: false,
                                                //表格高度，100%则自动缩放
                                                height: "100%",
                                                //表格宽度,如果在colModel有设置则不起作用，100%则自动缩放
                                                width: "100%",
                                                //分页数
                                                rowNum: 22,
                                                //在pagebar中的可选择分页数大小
                                                //rowList : [ 15, 30 ],
                                                //pagebar对应的html控件名，必须
                                                pager: '#pager',
                                                //默认排序字段
                                                sortname: 'ship_id',
                                                //参数重命名,对一些默认的url传递的参数进行重命名，可以参考base/constants.js  必须
                                                prmNames: page_parNames,
                                                //数据信息，对json数据进行解析 ,必须
                                                jsonReader: {
                                                    //从哪个json对象中取值
                                                    root: "ships",
                                                    //当前页字段名
                                                    page: "page.currentPage",
                                                    //总页数字段名
                                                    total: "page.totlePage",
                                                    //总记录数字段名
                                                    records: "page.totle",
                                                    //指明每行的数据是可以重复的，如果设为false，则会从返回的数据中按名字来搜索元素，这个名字就是colModel中的名字
                                                    repeatitems: false,
                                                    //id为root下哪个子对象,如果是在cell中取值，则用root.id
                                                    id: "ship_id"
                                                },
                                                //表格标题名
                                                caption: "船舶列表",
                                                //点击方法名
                                                onSelectRow: function (id) {

                                                }
                                                // 			pagerpos : "left"
                                            });
                            //将表格加载到页面
                            jQuery("#list").navGrid("#pager", {
                                //加载的按钮信息，默认都为true
                                view: false,
                                search: false,
                                edit: false,
                                refresh: false,
                                //点击对应按钮时调用的函数
                                addfunc: add,
                                delfunc: del
                            });
                            //将表格设置成加载filterBar的表格
                            jQuery("#list").filterToolbar(toolbar_opt);
                            //数据提交方式，建议设置成post否则在后台会有乱码
                            $.jgrid.ajaxOptions.type = 'post';
                        });

        var add = function () {
            alert("我点击了添加按钮");
            //parent.mainFrame.location.href = "ship-edit";
        };
        var del = function (id) {
            if (confirm("确定删除?")) {
                alert("我确定了删除操作");
                //做个参考，jquery的ajax的数据提交和取回方式.
                //$.getJSON("demo-del?ship.ship_id=" + id+"&t="+new Date().getMilliseconds(), function(data) {
                //	refresh();
                //	alert(data.msg);
                //});
            }
        };
        /**
         做个参考，在删除后需要刷新当前表格，下面的方法为刷新方法
         刷新当前页
         **/
        function refresh() {
            var grid = "#list";
            jQuery("#list").jqGrid('setGridParam', {
                url: $(grid).getGridParam('url'),
                page: $(grid).getGridParam('page'),//current page
                rows: $(grid).getGridParam('rows'),//rows
                sidx: $(grid).getGridParam('sidx'),//sidx
                sord: $(grid).getGridParam('sord')
                //sord
            }).trigger("reloadGrid");
        }
    </script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
<!-- 	</div> -->
</body>
</html>
